<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        #map_container {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
    <!-- 通用方法库common.js,提升开发速度 -->
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <!-- 下边是需要的两个库 -->
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <!-- 飞线库 -->
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script>

    <title>地图展示</title>
</head>

<body>
    <div id="map_container"></div>
    <script type="text/javascript">
        /* initMap初始化通用方法 （id固定）*/
        var map = initMap({
            tilt: 60,
            heading: 0,
            center: [103.438656, 25.753594],
            zoom: 6,
            style: purpleStyle
        });
        // 1.准备数据源 
        setData(initData());

        function initData() {
            var data = [];
            // 生成贝塞尔曲线坐标集
            /* （1.实例化贝塞尔曲线对象；2.设置起点和终点坐标；3.生成贝塞尔曲线坐标集） */
            var citys = [
                '北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
                '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
                '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
            ];
            var randomCount = 100; // 模拟的飞线的数量
            var curve = new mapvgl.BezierCurve();
            // 构造数据
            while (randomCount--) {
                var startPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
                var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)])
                curve.setOptions({
                    start: [startPoint.lng, startPoint.lat],
                    end: [endPoint.lng, endPoint.lat]
                });
                var curveModelData = curve.getPoints();
                data.push({
                    geometry: {
                        type: 'LineString',
                        coordinates: curveModelData
                    },
                    properties: {
                        count: Math.random()
                    }
                });
            }
            return data;
        }



        // 2.绘制数据源
        function setData(data) {
            /* （1.初始化图层；2.初始化飞线对象；3.将飞线对象添加到图层中；4.将飞线对象与数据源进行绑定） */
            var view = new mapvgl.View({
                map
            });
            var flylineLayer = new mapvgl.FlyLineLayer({
                style: 'chaos', // 随机移动
                step: 0.3, // 控制动画速度
                color: 'rgba(33, 242, 214, 0.3)', // 飞线颜色
                textureColor: function(data) { // 底线颜色
                    return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';
                },
                textureWidth: 20, // 飞线宽度
                textureLength: 10 // 飞线动画长度
            });
            view.addLayer(flylineLayer)
            flylineLayer.setData(data);
        }
    </script>
</body>

</html>